<template>
	<view class="store-detail">
		<view class="cu-custom" :style="{height: wanlsys.height + 'px' }">
			<view class="cu-bar fixed bg-white" :style="{ height: wanlsys.height + 'px', paddingTop: wanlsys.top + 'px'}">
				<view class="action fanhui" @tap="$wanlshop.back(1)"><text class="wlIcon-fanhui1"></text></view>
				<span class="cu-title">{{shopData.shopname?shopData.shopname:'店铺详情'}}</span>
				<!-- #ifndef MP -->
				<view class="action" @tap="showModal('menu')">
					<text class="wlIcon-gengduo"></text>
					<view class="cu-tag badge" v-if="( statistics.notice.notice + statistics.notice.order + statistics.notice.chat + statistics.order.pay + statistics.order.delive + statistics.order.receiving + statistics.order.evaluate + cart.cartnum ) > 0">{{( statistics.notice.notice + statistics.notice.order + statistics.notice.chat + statistics.order.pay + statistics.order.delive + statistics.order.receiving + statistics.order.evaluate + cart.cartnum )}}</view>
				</view>
				<!-- #endif -->
			</view>
		</view>		
		
		<view class="detail-conter">
			<view class="detail-conter-top">
				<view class="detail-conter-state">
					{{shopData.run_status==0?'休息中':shopData.run_status==1?'营业中':'未知'}}
				</view>
				<view class="detail-conter-img">
					<image :src="$wanlshop.oss(shopData.avatar)" style="border-radius: 50%;" mode='aspectFill'></image>
					<!-- <image :src="" mode="widthFix" style="border-radius: 50%;"></image> -->
				</view>
				<view class="detail-conter-top-id">
					ID：{{shopData.id}}
				</view>
				<view class="detail-conter-top-time">
					营业时间：{{shopData.run_time}}
				</view>
			</view>
			<view class="detail-conter-data">
				<view class="detail-conter-title">
					店铺资料
				</view>
				<view class="detail-conter-list">
					<view class="detail-conter-list-item">
						<view class="detail-item-key">
							店铺名称
						</view>
						<view class="detail-item-value">
							{{shopData.shopname}}
						</view>
					</view>
					<view class="detail-conter-list-item">
						<view class="detail-item-key">
							店长姓名
						</view>
						<view class="detail-item-value">
							{{shopData.shopConfig.sendName}}
						</view>
					</view>
					<view class="detail-conter-list-item">
						<view class="detail-item-key">
							绑定手机号
						</view>
						<view class="detail-item-value">
							{{shopData.shopConfig.sendPhoneNum?shopData.shopConfig.sendPhoneNum:'未知'}}
						</view>
					</view>
					<view class="detail-conter-list-item weizhi">
						<view class="detail-conter-list-item-l">
							<text>店铺位置</text>
							<view class="detail-item-value">
								{{shopData.shopConfig.sendAddr}}
							</view>
						</view>
						<view class="detail-conter-list-item-r" @click="getOpenAddress">
							<text class="wlIcon-weizhi"></text>
							<text>点击导航去店铺</text>
						</view>

					</view>
					

				</view>
			</view>
		</view>


		<view class="detail-bg">
			<view></view>
			<view></view>
		</view>

		<!-- 模态框 -->
		<view class="WANL-MODAL">
			<view class="cu-modal top-modal" :class="modalName == 'menu' ? 'show' : ''" @tap="hideModal">
				<view class="wanl-modal-menu cu-dialog" @tap.stop="">
					<wanl-direct  @change="hideModal"/>
				</view>
			</view>
			<!-- 分享 -->
			<view class="cu-modal bottom-modal" :class="modalName == 'share' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<wanl-share 
						:scrollAnimation="scrollAnimation" 
						shareTitle="我发现了一个很好的线上购物商城，这是商城类目" 
						shareText="品质好而且很省钱如果自己在上面购买，每年可以省下1%~40%的钱" 
						:image="$wanlshop.appstc('/common/logo.png')"
						:href="common.appConfig.domain+'/pages/tabBar/category/category?QRtype=category'"
					@change="hideModal"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'; 
export default {
	data() {
		return {
			wanlsys: this.$wanlshop.wanlsys(),
			height: 0, //scroll-view高度
			currentTab: 0, //预设当前项的值
			scrollTop: 0 ,//tab标题的滚动条位置
			modalName: null,
			scrollAnimation: 300,
			shopData:{}, // 商家详情
		};
	},
	computed: {
		...mapState(['common','statistics','cart'])
	},
	onLoad(option) {
		this.getShopDetail(option.id);
		// #ifdef APP-PLUS
		this.height = this.wanlsys.windowHeight + this.wanlsys.windowBottom - this.wanlsys.height;
		// #endif
		// #ifdef H5
		this.height = this.wanlsys.windowHeight + this.wanlsys.windowBottom - this.wanlsys.height - 50;
		// #endif
		// #ifdef MP
		this.height = this.wanlsys.windowHeight - this.wanlsys.height;
		// #endif
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		this.height = this.height - uni.upx2px(180);
	},
	methods: {
		// 获取商家信息
		getShopDetail(id){
			uni.showLoading({
				title: "加载中"
			});
			this.$api.post({
				url: `${this.$wanlshop.config('appurl')}/wanlshop/shop/shop`,
				data: {
					id: id,
				},
				header: { token: this.$store.state.user.token },
				success: res => {
					this.shopData = res;
					uni.hideLoading();
				}
			});
		},
		//打开地图导航 
		getOpenAddress() {
			let userShop = this.shopData;
			console.log(userShop)
			var latitude=userShop.shopConfig.latitude
			var longitude=userShop.shopConfig.longitude
			uni.openLocation({
				latitude: Number(latitude),
				longitude: Number(longitude),
				name: userShop.shopname,
				address: userShop.city+userShop.shopConfig.address,
				fail(err) {
					console.log(err)
				}
			})
		},
		// 弹出层
		showModal(name) {
			// 滚动下分享
			if(name == 'share' && this.modalName != 'share'){
				setTimeout(() => {
					this.scrollAnimation= 0;
				}, 300);
			}
			this.modalName = name;
		},
		hideModal(name) {
			if (name) {
				this.showModal(name);
			}else{
				this.modalName = null;
			}
		},
	}
}
</script>

<style>
	.action.fanhui{
		position: absolute;
		left: 20rpx;
	}
	.detail-conter-state{
		font-size: 26rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #FFFFFF;
		position: absolute;
		right: 30rpx;
	}
	.detail-conter-list-item-r text:nth-child(2){
		margin-top: -14px;
	}
	.detail-conter-list-item-r{
		margin-left: auto;
		display: flex;
		flex-direction:column;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 20rpx;
		color: #FF4400;
		margin-right: 20rpx;
	}
	.detail-conter-list-item-l{
		font-size: 24rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #FF572B;
	}
	.detail-item-value{
		font-size: 28rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #4D4D4D;
		margin-top: 20rpx;
	}
	.detail-item-key{
		font-size: 24rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #FF572B;
	}
	.detail-conter-list-item.weizhi{
		display: flex;
		flex-direction: row;
		justify-content: start;
	}
	.detail-conter-list-item{
		height: 129rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-bottom: 1rpx solid #DCDCDC;
		margin-bottom: 30rpx;
	}
	.detail-conter-title{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		padding: 30rpx 0;
	}
	.detail-conter-data{
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		position: absolute;
		top: 360rpx;
		padding-left: 20rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.detail-conter-top-time{
		font-size: 26rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #FFFFFF;
		margin-top: 22rpx;
	}
	.detail-conter-top-id{
		font-size: 36rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #FFFFFF;
		margin-top: 22rpx;
	}
	.detail-conter-top{
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-top: 30rpx;
	}
	.detail-conter-img{
		width: 140rpx;
		height: 140rpx;
		/* overflow: hidden; */
		background-color: #EEEEEE;
		border-radius: 50%;
	}
	.detail-conter-img image{
		width: 140rpx;
		height: 140rpx;
	}
	.detail-conter-top{
		width: 100%;
		height: 100rpx;
	}
	.detail-conter{
		position: absolute;
		z-index: 1;
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
	}
	.store-detail{
		position: relative;
	}
	.detail-bg{
		width: 100%;
		z-index: -1;
	}
	.detail-bg view:nth-child(1){
		height: 286rpx;
		background: #FD8464;
	}
	.detail-bg view:nth-child(2){
		height: 290rpx;
		background: #FD8464;
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 64% 100%);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 64% 100%);
	}
	.shop-item-top-img{
		width: 88rpx;
		height: 88rpx;
	}
	.shop-list{
		padding: 32rpx;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	.shop-list-item{
		width: 687rpx;
		height: 243rpx;
		margin: 0 auto;
		border-bottom: 2rpx solid #F6F6F6;
		padding: 40rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		position: relative;
	}
	.shop-item-top{
		display: flex;
	}
	.shop-item-top-conter{
		margin-left: 42rpx;
		display: flex;
		flex: 1;
	}
	.shop-item-top-conter-l{
		margin-top: -8rpx;
	}
	.shop-item-top-conter-l view:nth-child(1){
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		margin-bottom: 10rpx;
	}
	.shop-item-top-conter-l view:nth-child(2){
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #A6A6A6;		
		margin-bottom: 10rpx;
	}
	.shop-item-top-conter-r{
		margin-left: auto;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF4400;
	}
	.shop-item-bottom{
		margin-left: 130rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #575757;
		margin-right: 28rpx;
	}
	.shop-list-item .wlIcon-fanhui2{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 14rpx;
	}
	
	.cu-custom .cu-bar{
		z-index: 99;
		background: #FD8464;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.cu-title{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	.action{
		margin-left: auto;
	}
</style>
